<template>
	<view class="utoastBox" v-if="params.utoastControl">
		<view class="utoast ff-line-height-1-3" :class="[params.utoastType ? 'bgSuccess' : 'bgError']">
			{{ params.utoastTxt }}
		</view>
	</view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
let params = reactive({
	utoastControl: false, // 加载动画显示隐藏
	utoastType: true, // 类型 成功or失败
	utoastTxt: '' // 动画的文字提示
});
// 打开动画(成功)
let openuToastSuccess = (e) => {
	params.utoastTxt = e;
	params.utoastType = true;
	params.utoastControl = true;
	setTimeout(() => {
		params.utoastControl = false;
		params.utoastTxt = '';
	}, 1500);
};
// 打开动画(失败)
let openuToastError = (e) => {
	console.log('saadsvd');
	params.utoastTxt = e;
	params.utoastType = false;
	params.utoastControl = true;
	setTimeout(() => {
		params.utoastControl = false;
		params.utoastTxt = '';
	}, 2000);
};
defineExpose({
	openuToastSuccess,
	openuToastError
});
</script>

<style scoped lang="scss">
.utoastBox {
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 111;
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.utoast {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 25rpx 30rpx;
	border-radius: 10rpx;
	max-width: 600rpx;
	// transition: all 0.5s ease-out;78
}

.bgSuccess {
	color: #60c82a;
	border: 2rpx solid #c2f5cb;
	background-color: #dbf1e1;
}

.bgError {
	color: #f56c6c;
	border: 2rpx solid #fde2e2;
	background-color: #fef0f0;
}
</style>
